<template>
   <div class="wrapper tag-item">
        <div class="fl left-list">
            <div class="tc-data-list">
    <div class="tc-list" v-infinite-scroll="loadMore">
            <ul class="detail-list">
                    <li class="qa-item" v-for="(item,index) in items" :key="index">
                         <div class="fl record"> 
                            <div class="number"> 
                            <div class="border useful"> 
                                <p class="usenum" @click="doThumbup(index)"><a href="#" class="zan">
                                    <i :class="'fa fa-thumbs-up '+item.zan" aria-hidden="true"></i>
                                </a></p> 
                                <p class="zannum"> {{item.thumbup}} </p> 
                            </div> 
                            <div class="border answer"> 
                                <a href="#" class="star"><i class="fa fa-star-o" aria-hidden="true"></i></a> 
                            </div> 
                            </div> 
                            </div> 
                            <div class="info"> 
                            <p class="text"> 
                                <router-link :to="'/spit/item/'+item.id"> {{item.content}} </router-link>
                            </p> 
                            <div class="other"> 
                            <div class="fl date"> 
                                <span>{{item.publishtime}}</span> 
                            </div> 
                            <div class="fr remark"> 
                                <a href="#" data-toggle="modal" data-target="#shareModal" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 分享</a> 
                                <a href="#" data-toggle="modal" data-target="#remarkModal" class="comment"><i class="fa fa-commenting" aria-hidden="true"></i> 回复</a> 
                            </div> 
                            </div> 
                            </div> 
                            <div class="clearfix"></div>
                    </li>
            </ul>


            <div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="myModalLabel">分享到</h4>
                        </div>
                        <div class="modal-body" style="overflow:hidden">
                            <div class="jiathis_style_32x32">
                                <a class="jiathis_button_qzone"></a>
                                <a class="jiathis_button_tsina"></a>
                                <a class="jiathis_button_weixin"></a>
                                <a class="jiathis_button_cqq"></a>

                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="remarkModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="myModalLabel">发表评论</h4>
                        </div>
                        <div class="modal-body">
                            <div class="comment">
                                <span class="who"><img src="~/assets/img/asset-photo.png">匿名评论</span>: 今天入职腾讯，产品岗，普通非985211大学，上家是不到五十人创业小公司！16年毕业！找内推腾讯给的面试机会，五轮面试！可能是我把运气攒一起了！
                            </div>
                            <div class="form">
                                <textarea class="form-control" rows="5" placeholder="匿名评论"></textarea> 
                                <div class="remark">
                                    <button class="sui-btn btn-info">发表</button>
                                </div>                             
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>
        </div>
        <div class="fl right-tag">
            <div class="block-btn">
                <p>来个匿名吐槽，发泄一下你心中的怒火吧！</p>
               <router-link class="sui-btn btn-block btn-share" to="/spit/submit">发吐槽</router-link>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</template>
<script>
import '~/assets/css/page-sj-spit-index.css'
import spitApi from '@/api/spit'
import {getUser} from '@/utils/auth'
export default {
    data(){ //用于声明页面需要的变量 主要用于数据绑定或数据渲染
        return {
            pageNo:1,
            pageSize:12
        }
    },
    asyncData () { //nuxt中默认初始化数据的函数
        return spitApi.search(1,12,{})
           .then( res => {
                return { items: res.data.data.rows }
           })
    },
    methods:{ //定义页面的事件函数 
        loadMore(){ //瀑布流分页事件
            this.pageNo ++ 
            spitApi.search(this.pageNo,this.pageSize,{}).then(res =>{
                //将返回的结果集追加在items的后面
                this.items = this.items.concat(res.data.data.rows)
            })
        },
        doThumbup(index){ //吐槽点赞
            let msg = ''
            if(getUser().name === undefined){
                msg = '您还没有登录哦'
            }
            if(this.items[index].zan === 'color'){
                msg = '您已经点过赞了哦'
            }
            if(msg !== ''){
                this.$message({
                    message: msg,
                    type: 'warning'
                });
                return
            }
            let id = this.items[index].id
            spitApi.thumbup(id).then(res =>{
                if(res.data.flag){
                    this.items[index].thumbup +=1
                    //用来标记当前这条吐槽数据当前用户是否已点赞
                    this.items[index].zan = 'color'
                }
            })
        }
    }
}
</script>
